<!DOCTYPE html>
<html>

<head>
  <title>用户注册</title>
  <script src="../../js/axios.min.js"></script>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../../css/login.css">
</head>
<style>
  .success {
    color: green;
  }

  .error {
    color: red;
  }

  .container {
    max-width: 500px;
  }

  .form-control {
    height: 38px;
  }

  button {
    width: 100%;
  }

  .custom-title {
    font-size: 28px;
    /* 自定义字体大小 */
    font-weight: bold;
    /* 加粗字体 */
  }
</style>
</head>

<body>
  <br><br><br>
  <div class="container">
    <h1 class="mb-4 text-center text-primary custom-title">用户注册</h1>
    <form id="register-form">
      <div class="form-group">
        <label for="account">账号：</label>
        <input type="text" class="form-control" id="account" required>
        <span id="account-message"></span>
      </div>

      <div class="form-group">
        <label for="idCard">身份证：</label>
        <input type="text" class="form-control" id="idCard" required>
        <span id="idCard-message"></span>
      </div>

      <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" class="form-control" id="password" required>
      </div>

      <div class="form-group">
        <label for="name">名字：</label>
        <input type="text" class="form-control" id="name" required>
      </div>
      <br>
      <button type="submit" class="btn btn-primary">注册</button>
      <div id="message" class="error-message mt-3"></div>


      <div class="text-center mt-3">
        <a href="login.html">返回登录</a>
      </div>
      <span id="register-message"></span>
    </form>
  </div>

  <script>

    const form = document.getElementById('register-form');
    const accountInput = document.getElementById('account');
    const idCardInput = document.getElementById('idCard');
    const accountMessage = document.getElementById('account-message');
    const idCardMessage = document.getElementById('idCard-message');
    const registerMessage = document.getElementById('register-message');

    // 检查账号是否重名
    accountInput.addEventListener('blur', () => {
      const account = accountInput.value;
      fetch('http://localhost:8888/api/user/checkAccount', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ account })
      })
        .then(response => response.json())
        .then(data => {
          if (data.code === 0) {
            accountMessage.textContent = '验证成功';
            accountMessage.className = 'success';
          } else {
            accountMessage.textContent = '账号不能重名';
            accountMessage.className = 'error';
          }
        });
    });

    // 检查身份证是否重复注册
    idCardInput.addEventListener('blur', () => {
      const idCard = idCardInput.value;
      fetch('http://localhost:8888/api/user/checkIdCard', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ idCard })
      })
        .then(response => response.json())
        .then(data => {
          if (data.code === 0) {
            idCardMessage.textContent = '验证成功';
            idCardMessage.className = 'success';
          } else {
            idCardMessage.textContent = data.message;
            idCardMessage.className = 'error';
          }
        });
    });

    // 提交注册请求
    form.addEventListener('submit', (event) => {
      event.preventDefault();

      const account = accountInput.value;
      const idCard = idCardInput.value;
      const password = document.getElementById('password').value;
      const name = document.getElementById('name').value;

      fetch('http://localhost:8888/api/user/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ account, idCard, password, name })
      })
        .then(response => response.json())
        .then(data => {
          if (data.code === 0) {
            window.alert(data.message);
            window.location.href = 'login.html';
          } else {
            registerMessage.textContent = data.message;
            registerMessage.className = 'error';
          }
        });
    });

  </script>
</body>

</html>